<script type="text/javascript">
$(document).ready(function(){
    $('#add-classifier-cancel').click(function(){
        $('#add-classifier-popup').css('display', 'none');
        $('#facade').css('display', 'none');
    });
    $('.close-button').click(function(){
        $('#add-classifier-popup').css('display', 'none');
        $('#facade').css('display', 'none');
    });

   $('#add-classifier-submit').click(function(){
        var invalid = false;
        $('.validation-errors').empty();
        if($("#classifier-type").val() == ''){
            invalid = true;
            $('.validation-errors').append('<span class="errors">* Select classifier type</span>');
        }
        if($("#classifier-value").val() == ''){
            invalid = true;
            $('.validation-errors').append('<span class="errors">* Classifier value is required</span>');
        }
        if(invalid)
            $('.validation-errors').css('display', 'block');
        else{
            $('.validation-errors').css('display', 'none');
            var matter_ID = $('#this-matter-id').val();
            var container_ID = $('#this-container-id').val();
            if(container_ID == '')
                 container_ID = matter_ID;

            $.ajax({
                url: '/matter/add-title',
                type: 'POST',
                data: { type_code: $('#classifier-type').val(),
                        matter_ID: container_ID,
                        value: $('#classifier-value').val(),
                      },
                success: function(data){
                   if( data.match(/SQLSTATE/) ){
                     alert(data);
                   }else{
                     $('#add-classifier-popup').css('display', 'none');
                     $('#facade').css('display', 'none');
                     $(location).attr("href", '/matter/view/id/' + matter_ID);
                   }
                }
            });
        }
   });
   $('input:button').button();
});
</script>
<style type="text/css" >
#add-classifier-head{
  display:block;
  width: 400px;
  background: #1E4262;
  color: #FFF;
  padding: 5px;
  border: 1px solid #1E4262;
  -moz-border-radius: 5px 5px 0px 0px;
  -webkit-border-radius: 5px 5px 0px 0px;
}
#add-classifier{
  width: 400px;
  background: #FFF;
  display: block;
  border: 1px inset #888;
  padding: 5px;
  -moz-border-radius: 0px 0px 5px 5px;
  -webkit-border-radius: 0px 0px 5px 5px;
}
#add-classifier label{
  display: inline-block;
  text-align: right;
  width: 100px;
  margin: 0px 5px 10px 0px;
  vertical-align: top;
}
#add-classifier textarea{
  width: 200px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px inset #888;
  padding: 3px 2px;
}
#add-classifier-actions{
  margin: 10px 0px auto auto;
  width: 70%;
}
.close-button{
  background: #f00;
  float:right;
  padding: 2px 4px 0px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  cursor: pointer;
  font-family: arial;
}
.required-field{
  color: #f00;
  font-weight: bold;
  margin-right:4px;
}
.validation-errors{
display:none;
border:1px solid #f00;
color:#f00;
padding:5px;
width: auto;
margin-bottom: 10px;
  -moz-border-radius: 5px;
  -webkit-border-radius: 5px;
}
.validation-errors span{
    display: block;
    width: auto;
    margin-left: 20px;
}
#classifier-type{
  width: 206px;
  -moz-border-radius: 3px;
  -webkit-border-radius: 3px;
  border: 1px inset #888;
  padding: 3px 2px;
}
</style>
<div class="place-card">
<div id="add-classifier-head">
Add new Classifier <span class="close-button">X</span> 
</div>
<div id="add-classifier">
<div class="validation-errors">

</div>
<form type="post" action="" id="add-classifier-form" >
<label for="classifier-type" >Classifier Type</label>
<select id="classifier-type">
<option value=""> select type </option>
<?php if($this->classifier_types) { 
foreach($this->classifier_types as $classifier){
?>
<option value="<?=$classifier['code']?>"><?=$classifier['type']?></option>
<?php }} ?>
</select>

<label for="classifier-value">Value</label>
<textarea id="classifier-value" value=""/>

<div id="add-classifier-actions">
  <input type="button" id="add-classifier-submit" value="Add Item" />
  <input type="button" id="add-classifier-cancel" value="Cancel" />
</div>

</form>
</div>
</div>
